<template>
	<view class="page-container">
		<!-- 自定义导航栏 -->
		<u-navbar :fixed="true" placeholder  :autoBack="true">
			<template #left>
				<view class="u-nav-slot">
					<u-icon name="arrow-left" size="19" ></u-icon>
				</view>
			</template>
			<template #center>
				<view class="">
					预约记录
				</view>
			</template>
		</u-navbar>
		<!-- 状态切换Tabs -->
		<u-tabs :list="tabsList" :current="activeTab" @change="onChangeTab" :sticky="true" :scrollable="false" />

		<!-- 预约记录列表 -->
		<view class="history-list" v-if="historyList.length > 0">
			<view class="history-item" v-for="item in historyList" :key="item.id">
				<view class="item-header">
					<text class="order-no">订单号: {{ item.order_no }}</text>
					<text class="status" :class="getStatusClass(item.status)">
						{{ getStatusText(item.status) }}
					</text>
				</view>
				<view class="item-body">
					<view class="item-title">
						<text>寺院法师预约</text>
						<text v-if="item.status == 2 && item.code != null && item.code != ''">预约号： {{ item.code }} 号</text>
					</view>
					<view class="item-detail">
						<text class="label">姓名:</text>
						<text class="value">{{ item.name }}</text>
						<!-- <text class="value" v-if="item.queue_no"> {{ item.queue_no }}号.</text> -->
					</view>

					<template v-if="item.status === 2">
						<view class="warning-text">
							<u-icon name="warning" color="#ee0a24" size="14"></u-icon>
							一人一号 一号只接待一人
						</view>
						<view class="item-detail warning-text">
							<u-icon name="warning" color="#ee0a24" size="14"></u-icon>
							过号请重新预约！
						</view>
					</template>

					<view class="item-detail">
						<text class="label">身份证号:</text>
						<text class="value">{{ item.card_no }}</text>
					</view>
					<view class="item-detail">
						<text class="label">电话号:</text>
						<text class="value">{{ item.mobile }}</text>
					</view>
					<view class="item-detail">
						<text class="label">预约日期:</text>
						<text class="value">{{ item.datetime }}</text>
					</view>
					<view class="item-detail" v-if="item.status === 3">
						<text class="label">驳回原因:</text>
						<text class="value">{{ item.reason }}</text>
					</view>
				</view>
				<view class="item-footer" v-if="item.status !== 1">
					<view class="" style="width: 160rpx;">
						<u-button type="primary" size="small" shape="circle" customStyle="" @click="goToBooking" color="#9C4242">
							再次预约
						</u-button>
					</view>
					
				</view>
			</view>
		</view>

		<!-- 空状态处理 -->
		<u-empty v-else mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="暂无记录" />
	</view>
</template>

<script lang="ts" setup>
	import { ref, onMounted, reactive } from 'vue'
	import { orderList, orderCount, updateRead } from '@/utils/api'

	const customStyle = reactive({
	  width: '120px',
	});
	// 状态数据
	const tabsList = ref([
		{ name: '等待中', badge: { isDot: false } },
		{ name: '已通过', badge: { isDot: false } },
		{ name: '未通过', badge: { isDot: false } }
	])
	const activeTab = ref('0')
	const historyList = ref<any[]>([])
	const searchValue = ref('')

	// 生命周期
	onMounted(async () => {
		await getOrderCount()
		await getDataList()
	})

	// 方法
	const onClickLeft = () => {
		uni.navigateBack()
	}

	const onChangeTab = (tab : any) => {
		console.log(tab)
		activeTab.value = tab.index
		getDataList()
		if(tab.index > 0){
			updateReadFun(tab.index)
		}
		
	}

	const getDataList = async () => {
		try {
			const res = await orderList({
				status: Number(activeTab.value) + 1,
				open_id: uni.getStorageSync('openid')
			})
			if (res.code === 1) {
				historyList.value = res.data
			}
		} catch (error) {
			console.error(error)
		}
	}

	const goToBooking = () => {
		uni.redirectTo({
			url: '/pages/booking/index'
		})
	}

	const getStatusClass = (status : number) => {
		switch (status) {
			case 1: return 'waiting'
			case 2: return 'passed'
			case 3: return 'failed'
			default: return ''
		}
	}

	const getStatusText = (status : number) => {
		switch (status) {
			case 1: return '审核中'
			case 2: return '审核通过'
			case 3: return '审核失败'
			default: return ''
		}
	}

	// 分享功能
	const onShareAppMessage = () => {
		const promise = new Promise(resolve => {
			setTimeout(() => {
				resolve({
					title: '寺院预约'
				})
			}, 2000)
		})
		return {
			title: '寺院预约',
			path: '/pages/index/index',
			promise
		}
	}

	const onShareTimeline = () => {
		return {
			title: '寺院预约',
			query: '',
			imageUrl: 'https://client-temple.shengxuankj.com/images/home_bg.png'
		}
	}
	
	const getOrderCount = async () => {
		try {
			const res = await orderCount({
				open_id: uni.getStorageSync('openid')
			})
			console.log(res)
			if (res.code === 1) {
				if(res.data.status_2 > 0 && activeTab.value != '2'){
					tabsList.value[1].badge.isDot = true
				}
				if(res.data.status_3 > 0 && activeTab.value != '3'){
					tabsList.value[2].badge.isDot = true
				}
			}
		} catch (error) {
			console.error(error)
		}
		
	}
	
	const updateReadFun = async (index: number) => {
		try {
			const res = await updateRead({
				open_id: uni.getStorageSync('openid'),
				status: Number(index) + 1
			})
			console.log(res)
			if (res.code === 1) {
				tabsList.value[index].badge.isDot = false
			}
		} catch (error) {
			console.error(error)
		}
		
	}
</script>

<style lang="scss">
	.page-container {
		background-color: #f7f8fa;
		min-height: 100vh;
	}

	.search-wrapper {
		padding: 20rpx;
		background-color: #fff;
	}

	.history-list {
		padding: 30rpx;
	}

	.history-item {
		background-color: #fff;
		border-radius: 16rpx;
		margin-bottom: 30rpx;
		padding: 30rpx;
	}

	.item-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #ebedf0;
	}

	.order-no {
		font-size: 24rpx;
		color: #969799;
	}

	.status {
		font-size: 26rpx;
		font-weight: bold;

		&.passed {
			color: #07c160;
		}

		&.waiting {
			color: #ff976a;
		}

		&.failed {
			color: #ee0a24;
		}
	}

	.item-body {
		padding: 30rpx 0;
	}

	.item-title {
		width: 100%;
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.item-detail {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		margin-bottom: 16rpx;
		line-height: 1.5;

		.label {
			color: #969799;
			width: 126rpx;
			flex-shrink: 0;
		}

		.value {
			color: #323233;
		}
	}

	.warning-text {
		color: #ee0a24;
		display: flex;
		align-items: center;
		font-size: 24rpx;
		margin-left: 120rpx;

		.u-icon {
			margin-right: 8rpx;
		}
	}

	.item-footer {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		padding-top: 20rpx;
		border-top: 1rpx solid #ebedf0;
	}

	.action-btn {
		width: 160rpx;
		height: 60rpx;
	}
	.tabs-container {
	  :deep(.u-tabs__wrapper__nav) {
	    width: 100%;
	    display: flex;
	    // justify-content 可以省略或设为 center
	  }
	
	  /* 新增：针对每一个 tab 项 */
	  :deep(.u-tabs__wrapper__nav__item) {
	    flex: 1; /* 让每个 item 占据等分的宽度 */
	    text-align: center; /* 确保文字居中 */
	  }
	}
</style>